<template>
  <!-- 企业详情 -->
  <view class="businessDetails">
    <view class="bgColor"></view>
    <view class="wrapper">
      <view class="blueTitle">
        <view class="wrapper-bar" style="height: auto">
          <view class="wrapper-bartitle">
            {{wbMentalPatientBean.name}}
          </view>
        </view>
      </view>

      <view class="wrapper-item wrapper-zero">
        <image :src="imgPrefix + wbMentalPatientBean.userImg" class="patient-avatar"></image>
        <view class="wrapper-facility">
          <view class="facility-item">
            <view class="textAlign label">性 别：</view>
            <view class="value valueName">
              {{wbMentalPatientBean.sex || '暂无'}}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">年 龄：</view>
            <view class="value valueName">
              {{wbMentalPatientBean.age || '暂无'}}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">民 族：</view>
            <view class="value valueName">
              {{wbMentalPatientBean.nation || '暂无'}}
            </view>
          </view>

          <view class="facility-item">
            <view class="textAlign label">血 型：</view>
            <view class="value valueName">
              {{wbMentalPatientBean.bloodType || '暂无'}}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">身份证号：</view>
            <view class="value valueName">
              {{encryptIDCard(wbMentalPatientBean.idCard) || '暂无'}}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">现居地址：</view>
            <view class="value valueName">
              {{wbMentalPatientBean.currentAddress || '暂无'}}
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 主要责任人 </view>
        </view>

        <view style="padding-top: 20rpx"><u-line></u-line></view>
        <view class="wrapper-body">
          <view class="item-info">
            <view class="textAlign lt">人员姓名</view>
            <view class="sign"> ：</view>
            <view class="rt ccie">
              <view>
                <!-- 这里为查看详情就是已完善 -->
                {{wbHelpInfoBean.helpName || '暂无'}}
              </view>
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">角色类型</view>
            <view class="sign"> ：</view>
            <view class="rt"> {{wbHelpInfoBean.helpPersonTypeText || '暂无'}}</view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">联系电话</view>
            <view class="sign"> ：</view>
            <view class="rt"> {{wbHelpInfoBean.helpPhone || '暂无'}}</view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">工作单位</view>
            <view class="sign"> ：</view>
            <view class="rt"> {{wbHelpInfoBean.orgName || '暂无'}}</view>
          </view>
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle">精神障碍等级</view>
        </view>
        <view style="padding-top: 20rpx"><u-line></u-line></view>
        <view class="wrapper-body">
          <view class="item-info">
            <view class="textAlign lt">等 级</view>
            <view class="sign"> ：</view>
            <view class="rt">{{ wbMentalPatientBean.patientLevel ? `${wbMentalPatientBean.patientLevel}级精神障碍` : '暂无' }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">判定时间</view>
            <view class="sign"> ：</view>
            <view class="rt">{{ wbMentalPatientBean.judgmentTime || '暂无' }}</view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">判定单位</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ wbMentalPatientBean.judgmentUnit || '暂无' }}
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle">辖区信息</view>
        </view>
        <view class="wrapper-body">
          <view class="item-info">
            <view class="textAlign lt">派出所</view>
            <view class="sign"> ：</view>
            <view class="rt"> {{ wbMentalPatientBean.policeAgencyName || '暂无' }}</view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">责任区</view>
            <view class="sign"> ：</view>
            <view class="rt"> {{ wbMentalPatientBean.policeJurisdictionName || '暂无' }}</view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">社区民警</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ mapPoliceBean.helpName || '暂无' }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">联系电话</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ mapPoliceBean.helpPhone || '暂无' }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    companyChangeDetail,
    messageDetail
  } from "@/api/myself.js";

  import {
    handleClickRouter,
    pvwImage,
    hiddenInfo,
    generateUrlOptions,
    getOptionsParams,
    encryptIDCard
  } from "@/utils/util.js";

  import moment from '@/utils/moment.js'

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        detail: {},
        options: {},
        imgPrefix: uni.getStorageSync("imgPrefix"),
        businessLicenseUrl: "", //营业执照
        personImage: "", // 法人照片
        userImage: "", // 民警照片
        companyStatus: "", //状态   1.审核中 2.审核通过 3.审核失败 4.退出纳管
        pageConfig: {
          pageNo: 1,
          pageSize: 100,
          total: 0,
        },
        routerParams: {},
        wbDeviceInfoBean: {},
        wbMentalPatientBean: {},
        wbHelpInfoBean: {},
        mapPoliceBean: {}
      };
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      console.log(this.routerParams)
      const {
        wbDeviceInfoBean,
        wbMentalPatientBean,
        wbHelpInfoBean,
        mapPoliceBean
      } = this.routerParams
      this.wbDeviceInfoBean = wbDeviceInfoBean
      this.wbMentalPatientBean = wbMentalPatientBean
      this.wbHelpInfoBean = wbHelpInfoBean
      this.mapPoliceBean = mapPoliceBean
    },
    methods: {
      encryptIDCard,
      handleClickRouter,
      pvwImage,
      hiddenInfo,
      moment,
    },
  };
</script>

<style>
  page {
    background-color: #f3f3f3 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .businessDetails {
    flex: 1;
    background-color: #f3f3f3;
    margin-bottom: 50px;

    .bgColor {
      width: 100%;
      height: 240rpx;
      background: #2488f5;
    }

    .businessDetails-title {
      position: absolute;
      top: 10rpx;
      left: 6%;
      color: #ffffff;
      font-size: 34rpx;
      font-weight: bold;
    }

    .wrapper {
      position: absolute;
      top: 30rpx;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 50px;

      .textAlign {
        width: 135rpx;
      }

      .blueTitle {
        padding: 20rpx 40rpx;
        border-radius: 10rpx 10rpx 0 0;
        background: #ecf9ff;
      }

      .wrapper-item {
        margin-bottom: 1vh;
        padding: 35rpx 40rpx;
        background-color: #ffffff;
        width: 702rpx;
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(180, 180, 180, 0.16);
        border-radius: 16rpx 16rpx 16rpx 16rpx;

        .facility-item {
          margin-bottom: 24rpx;
        }

        .wrapper-body {
          padding-top: 20px;
        }

        .text-picture {
          display: flex;

          .lt {
            width: 425rpx;
            max-width: 425rpx;

            .name {
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: bold;
              margin-bottom: 17rpx;
              margin-top: 20rpx;
            }
          }

          .rt {
            width: 200rpx;
            height: 220rpx;
            margin-left: 20rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .item-info {
          display: flex;
          margin-bottom: 25rpx;

          .lt {
            height: 34rpx;
            font-size: 26rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #7b7b7b;
            // width: 110rpx;
            min-width: 110rpx;
          }

          .sign {
            color: #7b7b7b;
          }

          .rt {
            width: calc(100% - 137rpx);
            font-size: 26rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333;
            margin-left: 6rpx;
          }

          .rtBlue {
            color: #2488f5;
          }

          .stat1 {
            color: #ffc002;
          }

          .stat2 {
            color: #eb0101;
          }

          .stat3 {
            color: #0cad83;
          }

          .stat4 {
            color: #9d9d9d;
          }
        }
      }

      .wrapper-bar {
        display: flex;
        justify-content: space-between;
        height: 40rpx;

        .wrapper-bartitle {
          font-size: 30rpx;
          font-weight: bold;

          text {
            display: inline-block;
            margin-left: 8px;
            color: #ababab;
            font-size: 28rpx;
          }

          image {
            margin-bottom: -3rpx;
            margin-right: 10rpx;
            width: 36rpx;
            height: 36rpx;
          }

          .textState {
            padding: 5rpx 12rpx;
            color: #ffffff;
            font-weight: 500;
            font-size: 24rpx;
            border-radius: 8rpx;
          }

          .stat1 {
            background: #ffc002;
          }

          .stat2 {
            background: #eb0101;
          }

          .stat3 {
            background: #0cad83;
          }

          .stat4 {
            color: #9d9d9d;
            background: #dedede;
          }
        }
      }

      .wrapper-zero {
        border-radius: 0 0 10rpx 10rpx;
        position: relative;

        .patient-avatar {
          position: absolute;
          right: 33rpx;
          top: 28rpx;
          width: 196rpx;
          height: 229rpx;
        }
      }
    }

    .wrapHeight {
      height: calc(100vh - 86px);
      overflow-y: auto;
    }

    .ccie {
      flex: 1;
      display: flex;
      justify-content: space-between;
    }

    .ccie-details {
      color: #2488f5;
    }

    .toPerfect {
      padding: 3rpx 10rpx;
      border-radius: 8rpx;
      color: #ffffff;
      background: #2488f5;
    }

    .btns {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }
</style>